<template>
    test
    <div class="bigBox">
        <div class="top"></div>
        <div class="bottom">

            <!-- <van-swipe-cell v-for="item in goodsList">
                <van-card num="2" :price="item.price" desc="描述信息" title="商品标题"
                    :thumb="item.picture" />
            </van-swipe-cell> -->

            <div class="configCof" @click="getType($event)">

                <van-row>
                    <van-col span="6">
                        <p>温度</p>
                    </van-col>
                    <van-col span="6" v-for="(item, index) in listArr" :key="index" @click="activeItem(item, index)">
                        <div class="configBox" :class="{ 'active': activeVar == index }" types="item">{{ item }}</div>
                    </van-col>
                </van-row>

                <van-row>
                    <van-col span="6">
                        <p>奶</p>
                    </van-col>
                    <van-col span="6" v-for="(item, index) in milkArr" :key="index" @click="activeMilk(item, index)">
                        <div class="configBox" :class="{ 'active': indexMilk == index }" :types="item">{{ item }}</div>
                    </van-col>
                </van-row>

                <van-row>
                    <van-col span="6">
                        <p>糖</p>
                    </van-col>
                    <van-col span="6">
                        <div class="configBox">无糖</div>
                    </van-col>
                </van-row>
                配置：{{ addTemp }}+{{ addMilk }}

            </div>


            <van-checkbox-group v-model="checked" ref="checkboxGroup">
                <van-checkbox name="a">复选框 a</van-checkbox>
                <van-checkbox name="b">复选框 b</van-checkbox>
                <van-checkbox name="c">复选框 c</van-checkbox>
            </van-checkbox-group>

            <van-checkbox v-model="checkeAll">复选框</van-checkbox>

            <van-swipe-cell>
                <van-card num="2" price="2.00" desc="描述信息" title="商品标题" class="goods-card"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>


            <!-- <van-button type="primary" @click="checkAll">全选</van-button>
            <van-button type="primary" @click="toggleAll">反选</van-button> -->

            

        </div>
    </div>

</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import axios from 'axios'
import { getSwiper } from '@/api/api'

const activeVar = ref(0)
const listArr = ref(['热', '常温', '冰'])
const indexMilk = ref(0)
const milkArr = ref(['无奶', '单份奶', '双份奶'])
const indexSuger = ref(0)
const sugerArr = ref(['无糖', '单份糖', '双份糖'])

const addTemp = ref('温度')
const addMilk = ref('奶量')

const activeItem = (item, index) => {
    activeVar.value = index
}
const activeMilk = (item, index) => {
    indexMilk.value = index
}

const getType = (e) => {
    // console.log(e.target.innerText);
    // if(e.target.innerText === '热') addTemp.value = '热'
    if (listArr.value.includes(e.target.innerText)) addTemp.value = e.target.innerText
    if (milkArr.value.includes(e.target.innerText)) addMilk.value = e.target.innerText
}


// -----------复选框----------------
const checked = ref([]);

// 复选框的dom
const checkboxGroup = ref(null);

const checkAll = computed({
    get() {

    },
    set() {

    }
})
// -----------复选框----------------



//----------获取轮播图----------
// onMounted( async ()=>{
//     let res = getSwiper().then(res1 => console.log(res1))

// })
//----------获取轮播图----------


//------------小兔仙儿----------------
onMounted(async () => {
    try {
        let res = await axios.get('http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart')
        console.log(res.data.result);
    } catch (error) {
        console.error(error)
    }

})
//------------小兔仙儿----------------

// const goodsList = ref([
//     {picture: '/img/goodspic.png',price: '27'}, 
//     {picture: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',price: '67'}])

const value2 = ref('123');


</script>

<style lang="scss" scoped>
.bigBox {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: beige;

    .top {
        width: 100%;
        flex: 1;
        // height: 200px;
        background-color: pink;
    }

    .bottom {
        width: 100%;
        // flex: 1;
        height: 200px;
        background-color: aquamarine;
        .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }
    }

    

}



.van-row {
    height: 30px;
    // background-color: #88afd5;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    padding: 5px 0;

    p {
        color: #383838;
    }

    .configBox {
        width: 80px;
        height: 30px;
        background-color: #fff;
        border: 1px solid #ccc0b4;
        border-radius: 15px;
        color: #ccc0b4;
    }

    .active {
        background-color: #ccc0b4;
        color: #fff;
    }
}
</style>